<template>
    <div class="pad">
        <!--  search start-->
        <!--<searchBar/>-->
        <!-- search end -->

        <!-- table  start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :pageCount="tableData.rows"
            @handleDetail="handleDetail"
            @handleThrough="handleThrough"
            height="89vh"
            v-loading="loading"
        />
        <!-- table end -->

        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDialog"
            center
            :title="title"
            width="40%"
            v-el-drag-dialog
        >
            <!-- 地区详情 -->
            <template>
                <el-table
                    :data="dialogData"
                    border
                    height="250px"
                    v-loading="detailLoading"
                >
                    <el-table-column
                            v-for="(item,index) in dialogDataLabel"
                            :label="item.label"
                            :prop="item.prop"
                            align="center"
                            :width="item.width"
                            :key="index"
                    />
                </el-table>
            </template>
        </el-dialog>

        <!-- 物料详情 dialog -->
        <el-dialog
            :visible.sync="isShowwlDetail"
            :title="title"
            center
            width="40%"
            v-el-drag-dialog
        >
            <el-table
                :data="dialogData"
                border
                v-loading="detailLoading"
            >
                <el-table-column
                    label="物料名称"
                    prop="name"
                    align="center"
                />
                <el-table-column
                    label="剩余授信库存"
                    prop="open_stock"
                    align="center"
                />
                <template v-if="dialogData.materiel_stock">
                    <el-table-column
                        label="剩余运营库存"
                        prop="materiel_stock"
                        align="center"
                    />
                </template>
                <el-table-column
                    label="合计"
                    prop="supplement"
                    align="center"
                />
            </el-table>
        </el-dialog>
        <!-- dialog end-->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "cancels",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '运营商名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '电话',
                        prop: 'phone'
                    },
                    {
                        label: '地区',
                        detail: true,
                        btnText: '详情',
                        methodName: 'handleDetail',
                        key:1
                    },
                    {
                        label: '取消理由',
                        prop: 'reason',
                        nowrap: true
                    },
                    {
                        label: '物料信息',
                        detail: true,
                        btnText: '详情',
                        methodName: 'handleDetail',
                        key: 2
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '操作',
                        detail: true,
                        btnText: '通过',
                        methodName: 'handleThrough'
                    }
                ],
                isShowDialog: false,
                title: '',
                key: '',
                dialogData:[],
                dialogDataLabel:[],
                dialogRegionLabel:[
                    {
                        label: '省',
                        prop: 'province'
                    },
                    {
                        label: '市',
                        prop: 'city'
                    },
                    {
                        label: '区',
                        prop: 'county'
                    }
                ],
                wlDetailDataLabel: [
                    {
                        label: '物料名称',
                        prop: 'name',
                        width:200
                    },
                    {
                        label: '配给数量',
                        prop: 'ration'
                    },
                    {
                        label: '剩余库存',
                        prop: 'materiel_stock'
                    },
                    {
                        label: '需补充数量',
                        prop: 'supplement'
                    }
                ],
                detailLoading: false,
                loading: false,
                isShowwlDetail: false
            }
        },
        methods: {
            async init () { //初始化
                this.loading = true;
                let paramsStr = Object.assign({page: this.page,pageSize: this.pageSize});
                let res = await this.api.AgentCancel(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail (...value) { //地区详情
                this.detailLoading = true;
                this.key= value[0];
                if(this.key === 1) {
                    this.isShowDialog = true;
                    this.title = '地区';
                    this.dialogDataLabel = this.dialogRegionLabel;
                    let res = await this.api.regionDetail({area: value[1]['region']});
                    this.dialogData = res.data;
                } else if(this.key === 2) {
                    this.isShowwlDetail = true;
                    this.title = '物料详情';
                    let res = await this.api.qxDetail({id: value[1]['id']});
                    this.dialogData = res.data.supplement;
                }
                this.detailLoading = false;
            },
            async handleThrough (...value) {  //通过操作
                let temp = value[1];
                this.$confirm('确定通过吗！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    new Promise((res) => {
                        let result =this.api.qxThrough({aid: temp['aid'], id: temp['id']});
                        res(result)
                    }).then((res) => {
                        this.$message({
                            type: res.code ? 'success' : 'error',
                            message: res.msg
                        });
                        res.code ? this.init() : ''
                    })
                }).catch(() => {});
            }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }
    }
</script>

<style scoped>
 .pad {
     padding:10px;
 }
</style>
